/* hook组件 useEffect / useLayoutEffect */
import React, {useEffect, useLayoutEffect, useState} from 'react'
import {Button} from "antd";


/*
* useEffect 不会堵塞浏览器渲染成真实dom，有限执行effect链表中的callback
* useLayoutEffect 会堵塞浏览器渲染真实dom，优先执行 effect 链表中的 callback
* useLayoutEffect 的优先级要优先于 useEffect，两者都可以获得dom元素
*   + useEffect：浏览器肯定是把第一次的真实已经绘制了，再去渲染第二次真实DOM
*   + useLayoutEffect：浏览器是把两次真实DOM的渲染，合并在一起渲染的
* 视图更新的步骤:
*   + 第一步: 基于babel-preset-react-app把JSX编译为createElement格式
*   + 第二步: 把createElement执行，创建出virtualDOM
*   + 第三步: 基于root.render方法把virtualDOM变为真实DOM对象(dom-diff)
*       + useLayoutEffect阻塞第四步操作先去执行Effect链表中的方法(同步操作)
*       + useEffect第四步操作和Effect链表中的方法执行，是同时进行的(异步操作)
*   + 第四步: 浏览器演染和绘制真实DOM对象
* */


const Demo = function () {
    console.log('render')
    let [num, setNum] = useState(0)

    useLayoutEffect(() => {
        if (num === 0) {
            setNum(10)
        }
    }, [num])
    useLayoutEffect(() => {
        console.log('useLayoutEffect');// 第一个输出
        console.log(document.querySelector('.num'))
    }, [num])
    useEffect(() => {
        console.log('useEffect')
        console.log(document.querySelector('.num'))
    })

    const handle = () => {
        setNum(0)
    }
    return <div className="demo" style={{background: num === 0 ? 'red' : 'green'}}>
        <span className="num">num:{num}</span>
        <Button type="primary" size="small" onClick={handle}>新增</Button>
    </div>
}

export default Demo